<div class="editor-root">
  <div>
    <h3 class="first">Default</h3>
    <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor>
    <p>Value: {{text1||'empty'}}</p>
    <button pButton type="button" label="Clear" icon="fa-close" (click)="text1=null"></button>
  </div>
  <hr style="border-top:0px;border-color:#dde3e6">
  <div class="custom-toolbar">
    <h3>Custom Toolbar</h3>
    <p-editor [(ngModel)]="text2" (onInit)="customInit($event)" [style]="{'height':'320px'}">
      <p-header>
        <span class="header-bar ql-formats" *ngFor="let btns of headerBars">
          <ng-container *ngFor="let btn of btns">
              <button *ngIf="!btn.isArr && btn.value" class="ql-{{btn.key}}" [value]="btn.value" [attr.aria-label]="btn.key"></button>
              <button *ngIf="!btn.isArr && !btn.value" class="ql-{{btn.key}}" [attr.aria-label]="btn.key"></button>
              <select *ngIf="btn.isArr" class="ql-{{btn.key}}">
                <option *ngFor="let opt of btn.value" [value]="opt">{{opt}}</option>
              </select>
          </ng-container>
        </span>
      </p-header>
    </p-editor>
    <p>Value: {{text2||'empty'}}</p>
    <button pButton type="button" label="Clear" icon="fa-close" (click)="text2=null"></button>
  </div>
</div>
